<template>
  <view class="card" style="border-radius: 20rpx">
    <view class="coupon-tag u-f-sx">满减券</view>
    <view class="flex-between p-c-20">
      <view>双十二大促销</view>
      <view class="u-f-sm" style="color: #ff5858">￥
        <span style="font-size: 38rpx">10.00</span>
      </view>
    </view>
    <view class="flex-between u-f-sm f-c-9">
      <view>有效期：领取后 90 天内可用</view>
      <view>满9.00可用</view>
    </view>
    <view class="line"></view>
    <view class="flex-between u-f-sm f-c-9">
      <view>双十二大促销</view>
      <a-button shape="circle" @click="console.log('222')" type="primary" style="margin-left: 10rpx"
                color="linear-gradient(-60deg, #ff5858 0%, #f09819 100%)">立即领取
      </a-button>
      <a-button shape="circle" @click="console.log('222')" type="primary" style="margin-left: 10rpx"
                color="linear-gradient(-60deg, #ff5858 0%, #f09819 100%)">立即使用
      </a-button>
      <a-button shape="circle" @click="console.log('222')" disabled type="info" style="margin-left: 10rpx" v-if="false">已使用</a-button>
      <a-button shape="circle" @click="console.log('222')" disabled type="info" style="margin-left: 10rpx">已失效</a-button>
    </view>
  </view>
</template>

<script lang="ts" setup>

</script>


<style scoped lang="scss">
@import "@/static/css/index.css";
.coupon-tag {
  position: absolute;
  top: 0;
  left: 0;
  background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);
  color: #fff;
  padding: 5rpx 10rpx;
  border-radius: 20rpx 0 20rpx 0;
}

.line{
  margin: 15rpx 0;
  border-bottom: 1rpx dashed #eee;
  position: relative;

  &:after{
    content: '';
    position: absolute;
    right: -30rpx;
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    top: -10rpx;
    background-color: #f1f1f1;
  }

  &:before{
    content: '';
    position: absolute;
    left: -30rpx;
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    top: -10rpx;
    background-color: #f1f1f1;
  }
}
</style>